<template>
    <div class="detail page-top" ref="detailRef">
        <div class="top-tab" v-show="isShowTopTab">
            <van-tabs v-model:active="active" @click-tab="onClickTab" >
                <template v-for="item in names">
                    <van-tab :title="item"></van-tab>
                </template>
            </van-tabs>
        </div>
        <van-nav-bar title="房屋详情" left-text="返回"
              left-arrow @click-left="onClickLeft" />
        <template v-if="houseInfos?.mainPart">
            <detail-swipe :swipe-data="houseInfos.mainPart.topModule.housePicture.housePics"></detail-swipe>
            <detail-infos name="描述" :ref="getSectionRef" :infos-date="houseInfos.mainPart.topModule"></detail-infos>
            <detail-facility name="设施" :ref="getSectionRef" :facility-data="houseInfos.mainPart.dynamicModule.facilityModule.houseFacility"></detail-facility>
            <detail-landlord name="房东" :ref="getSectionRef" :landlord-date="houseInfos.mainPart.dynamicModule.landlordModule"></detail-landlord>
            <detail-comment name="评论" :ref="getSectionRef" :comment-data="houseInfos.mainPart.dynamicModule.commentModule"></detail-comment>
            <detail-rules name="需知" :ref="getSectionRef" :rules-data="houseInfos.mainPart.dynamicModule.rulesModule.orderRules"></detail-rules>
            <detail-map name="周边" :ref="getSectionRef" :position-data="houseInfos.mainPart.dynamicModule.positionModule"></detail-map>
            <detail-intro :intro-data="houseInfos.mainPart.introductionModule"></detail-intro>
        </template>
    </div>
</template>

<script setup>
import { ref,computed,watch } from "vue"
import { useRoute,useRouter } from "vue-router"
import getDetailData from "@/services/modules/detail"
import detailSwipe from "./cpns/detail-1-swipe.vue"
import detailInfos from "./cpns/detail-2-infos.vue"
import detailFacility from "./cpns/detail-3-facility.vue"
import detailLandlord from "./cpns/detail-4-landlord.vue"
import detailComment from "./cpns/detail-5-comment.vue"
import detailRules from "./cpns/detail-6-rules.vue"
import detailMap from "./cpns/detail-7-map.vue"
import detailIntro from "./cpns/detail-8-intro.vue"
import getScroll from "@/utils/scroll.js"

// 获取路由数据
const route = useRoute()
const router = useRouter()

// route.params.id
const houseInfos = ref([])
getDetailData(route.params.id).then(res => {
    houseInfos.value = res.data.data
})

function onClickLeft() {
    router.back()
} 

const active = ref()
const tabArray = ref({})
const names = computed(() => {
    return Object.keys(tabArray.value)
})
const getSectionRef = (value) => {
    const name =  value?.$el.getAttribute("name")
    tabArray.value[name] = value?.$el
}

const detailRef = ref()
const { scrollTop } = getScroll(detailRef)

const isShowTopTab = computed(() => {
    return scrollTop.value > 300
})

const isClick = ref(false)
let currentTop = ref()
function onClickTab() {
    isClick.value = true
    const key = names.value[active.value]
    const el = tabArray.value[key]
    console.log(el.offsetTop);
    let discount = 0
    if (active.value !== 0) {
        discount = el.offsetTop - 44
    } else {
        discount = el.offsetTop
    }
    currentTop.value = discount
    detailRef.value.scrollTo({
        top:discount,
        behavior: "smooth"
    })
}

watch(scrollTop,(newValue) => {
    if (currentTop.value === detailRef.scrollTop) {
        isClick.value = false
    }
    if (isClick.value) return
    const els = Object.values(tabArray.value)
    const values = els.map(item => item.offsetTop)

    let index = 0
    for(let i = 0; i < values.length; i++) {
        if (values[i] > newValue) {
            index = i 
            break
        }
    }
    active.value = index
})

</script>


<style lang='less' scoped>
.detail {
    background-color: #fff;
    height: 100vh;
    overflow-y: auto;
    .top-tab {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;
    }
}
</style>